<template>
  <!-- 转派dialog-->
  <el-dialog
    title="事件转派"
    :visible.sync="isTransfer"
    :before-close="handleClose"
    class="dialog-class1"
  >
    <el-form ref="form" label-width="120px">
      <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <!-- <el-col :span="11">
          <el-form-item label="处理人员：" prop="num" class="small">
            <el-input size="small" v-model="evenData.num" :disabled="true"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="11">
          <el-form-item label="处理时间：" prop="date" class="small">
            <el-input
              size="small"
              v-model="evenData.date"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="11">
          <el-form-item label="选择转派人：" prop="date" class="small">
            <el-select
              v-model="value"
              filterable
              placeholder="请选择..."
              clearable
              size="medium"
            >
              <el-option
                v-for="item in nameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="22">
          <el-form-item label="附件：" prop="date" class="small">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :auto-upload="false"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="22">
          <el-input type="textarea" placeholder="请备注..." rows="5"></el-input>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="submitFun" style="background: #ff6a6c; color: #ffffff"
        >确 定</el-button
      >
      <el-button @click="resetFun" style="background: #ffffff">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "transferDialog",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,

      isTransferShow: false,
      evenData: {
        title: "XXX部门",
        num: "王一帆",
        date: "2021/01/01 09:30:00",
        name: "河北省石家庄市高新开发区XXX街道",
        source: "人工智能",
        ifFinish: "",
      },
      nameList: [
        {
          value: "1",
          label: "张三",
        },
        {
          value: "2",
          label: "李四",
        },
      ],
      value: "",
    };
  },
  props: {
    isTransfer: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {},
  created() {
    this.isTransferShow = this.isTransfer;
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //提交
    submitFun() {
      alert("提交啦");
      this.isTransferShow = false;
      this.$emit("transferCancelFun", this.isTransferShow);
    },
    handleClose(done) {
      this.isTransferShow = false;
      this.$emit("transferCancelFun", this.isTransferShow);
    },
    resetFun() {
      this.isTransferShow = false;
      this.$emit("transferCancelFun", this.isTransferShow);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-row {
  margin-bottom: 1.5%;
}
/deep/ .el-upload--picture-card {
  border-radius: 5px;
}
/deep/ .el-dialog__body {
  text-align: left;
}

/deep/ .el-dialog {
  background: #ffffff;
  border-radius: 15px;
}

/deep/ .el-dialog__header {
  background: white;
  border-radius: 15px;
  display: inline-block;
}

.dialog-class1 span {
  width: 240px;
  height: 22px;
  /*font-size: 16px;*/
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  /*color: #333333;*/
  line-height: 22px;
}

/deep/ .el-textarea {
  margin-top: 16px;
}

/deep/ .el-button {
  min-width: 102px;
  height: 40px;
  border-radius: 20px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #aaaaaa;
  /* width: 24px; */
  /* height: 24px; */
  background: #000000;
  border-radius: 15px;
}

/deep/ .el-dialog__header .el-dialog__title:before {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}

/deep/ .el-dialog__header .el-dialog__title {
  width: calc(100% + 30px);
  height: 30px;
  background: #ff6a6c;
  border-radius: 17px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/ .dialog-class4 .el-dialog__header .el-dialog__title {
  display: none;
}
</style>
